<template>
  <div>
    <div class="mainBox" :style="{backgroundImage:`url(${this.bgImg})`}">
      <div class="homeTit">
        <div class="homeTitTop">
          <div
            class="homeTitLog"
            :style="{backgroundColor:this.blogColor,color:this.fontColor?'#242424':'#B4B4B4'}"
          >T</div>
        </div>
        <div class="skewBox skewBox1" :style="{backgroundColor:this.blogColor}"></div>
        <div class="skewBox skewBox2" :style="{backgroundColor:this.blogColor}"></div>
      </div>
      <div class="fixBox" :style="{backgroundColor:this.blogColor}">
        <div class="headMenuBox" :style="{color:this.fontColor?'#242424':'#B4B4B4'}">
          <div class="headMenu" :class="{isActive:tabActive===0}" @click="tabSwitch(0)">博客</div>
          <div class="headMenu" :class="{isActive:tabActive===1}" @click="tabSwitch(1)">设置</div>
          <div class="headMenu" :class="{isActive:tabActive===2}" @click="tabSwitch(2)">实验室</div>
        </div>
      </div>
      <div class="mainCons" :style="{backgroundColor:this.blogColor,backgroundImage:getImgPath()}">
        <Blog v-show="tabActive===0"></Blog>
        <BlogSet
          v-show="tabActive===1"
          :fontColor="fontColor"
          @setFontColor="setFontColor"
          :bgImgUrl="bgImgUrl"
          @setBgImg="setBgImg"
          :blogColor="blogColor"
          @setBgColor="setBgColor"
        ></BlogSet>
      </div>
    </div>
  </div>
</template>

<script>
import Blog from "./components/blog";
import BlogSet from "./components/setting";
export default {
  data() {
    return {
      bgImg: require("../../assets/bgImg/bg1.jpg"),
      blogColor: "#fff",
      fontColor: true,
      bgImgUrl:"blogImg1",
      tabActive: 0,
    };
  },
  components: {
    Blog,
    BlogSet
  },
  mounted(){
    let blogSet=JSON.parse(localStorage.getItem('blogSet'))
    if(blogSet){
      this.$emit("setAllState", blogSet);
      this.blogColor=blogSet.blogColor;
      this.fontColor=blogSet.blogFontColor;
      this.bgImgUrl=blogSet.blogBgImg;
      this.$store.commit("setBlogColor", this.blogColor);
      this.$store.commit("setBlogFontColor", this.fontColor);
      this.$store.commit("setBlogBgImg", this.bgImgUrl);

      console.log(2222,blogSet)
    }
  },
  methods: {
    getImgPath() {
      let url=this.bgImgUrl===undefined?'blogImg1':this.bgImgUrl;
      return "url(" + require("./../../assets/bgImg/" + url + ".png") + ")"
    },
    tabSwitch(num) {
      this.tabActive = num;
    },
    setFontColor(val) {
      this.fontColor = val;
    },
    setBgColor(val) {
      this.blogColor = val;
    },
    setBgImg(val){
      this.bgImgUrl=val;
    }
  }
};
</script>

<style lang="scss">
@import "./default.scss";
</style> 